<template>
	<view class="shoplist bgff pt16">
		<view class="flex flexC pl15 pb10">
			<view class="bor00 flex1 r40 flex flexC px12 pb3 pt5">
				<image class="sear" src="/static/img/icon/search.png" mode="aspectFill"></image>
				<input @input="search" class="pl8 flex1 fs12" v-model="keyword" confirm-type="search" type="text" placeholder="请搜索店铺名字">
			</view>
			<text @click="onClose" class="close ml30 fs26 c00 px14">×</text>
		</view>
		<scroll-view scroll-y class="list boxS">
			<view v-for="(item,index) in list" @click="onSelectShop(item)" :key="index" class="flex flexC flexB mx16 py16 pr4 borb">
				<text>{{item.name}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"shop-list",
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				keyword: ''
			};
		},
		methods: {
			
			search(e){
				
				let val = e.detail.value;
				this.keyword = val;
				this.$emit("search",val)
				
			},
			
			onSelectShop(item) {
				this.$emit('onSelectShop',item);
			},
			onClose() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shoplist {
		border-radius: 12rpx 12rpx 0 0;
		.sear {width: 24rpx;height: 24rpx;}
		.close {position: relative;margin-top: -10rpx;}
		.list {
			max-height: 60vh;
		}
	}

</style>